import React, {useEffect, useState, useMemo, useCallback, memo} from 'react';
import { Button} from 'antd';
let prev

const Dom5 = function (callback, deps) {
    const useHook = (val) => {
        const [state , setState] = useState(val)
        const setVal = (arr) => {
            setState({
                ...state,
                ...arr
            })
        }

        return [state,setVal]
    }

    const [state , setState] = useHook({
        x:0,
        y:0
    })













    const add = useCallback((type) => {
        if(type === 'x'){
            setState({
                x:state.x+1
            })
            return
        }
        setState({
            y:state.y+1
        })
    },[state.x,state.y])


    return <>
            <Tittle x={state.x} y={state.y}/>
            <Footer change={add}/>
    </>
}

const Tittle = (props) => {
    const total = props.x + props.y
    let num = '_'
    if(total>0) num = (props.x / total * 100 ).toFixed(2) + '%'
    return <>
        <div>支持：{props.x}</div>
        <div>反对：{props.y}</div>
        <div>支持比：{num}</div>
    </>

}

const Footer = memo((props) => {
    const {change} = props
    return <>
        <div><Button onClick={change.bind(null,'x')}>X++</Button></div>
        <div><Button onClick={change.bind(null,'y')}>Y++</Button></div>
    </>

})


export default Dom5



